<template>
  <div>
        <div class="mui-card">
			<div class="mui-card-header">Review:</div>
			<div class="mui-card-content">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell mui-media" v-for="item in reviewsList">
				    	<a :href="item.alt">
				    		<img class="mui-media-object mui-pull-left" :src="item.author.avatar">
				    		<div class="mui-media-body">
                                {{item.author.name}} &nbsp 
                                <!-- {{item.created_at}} -->
				    			<p class='mui-ellipsis'>{{item.summary}}</p>
				    		</div>
				    	</a>
				    </li>
			    </ul>
			</div>
			<div class="mui-card-footer" @click="getNewDetail(start=start+count,count)">
                加载更多...
            </div>
		</div>

        <div class="mui-card">
			<div class="mui-card-header">你的看法:</div>
			<div class="mui-card-content">
				<textarea placeholder="请开始你的表演" minlength="150" name="myReview" id="myReview" rows="5"
                 v-model="myReview"></textarea>
			</div>
			<div class="mui-card-footer" style="text-align:center;">
                <input type="button" value="发送"
                 @click="postReview">
            </div>
		</div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
    data () {
        return {
            reviewsList:[],
            urlInfo: '',
            count:3,
            start:0,
            myReview:'',
        }
    },
    created () {
        this.getPathInfo ();
        this.getNewDetail ();
    },
    methods : {
        // 根据路径信息调用评论
        getPathInfo () {
           let routeInfo  = this.typeId.type;
           if (routeInfo === "movie") {
              this.urlInfo = 'v2/movie/subject/' + this.typeId.id
           } else if (routeInfo === "book") {
              this.urlInfo = 'v2/book/isbn/'+ this.typeId.id
           }
        },
        // 获取长评论
        getNewDetail () {
            this.$http.get(this.urlInfo+'/reviews?start='+this.start+"&count=" + this.count).then(result=>{
                this.reviewsList = this.reviewsList.concat(result.body.reviews)
                console.log(result)
            }).catch((err)=>{
                console.log(err)
            })
        },
        // 提交数据 
        postReview () {
            if (this.myReview.trim().length === 0) {
                return Toast("评论不能为空");
            }
            // 豆瓣评论提交 403 该处设为模拟数据
            this.$http.post('v2/book/reviews',{
                book:'26869340',
                title:'你好',
                content:this.myReview.trim()
            }).then((result) => {
                if (result.status === 200) {
                    console.log("成功")
                }
            },(err)=>{
                if (err.status === 0) {
                    console.log("需要登录,无访问豆瓣该API的权限")
                }
                // 模拟 假数据 无需刷新页面，无法请求直接渲染
                let msg = {
                    alt: 'https://f-lancer.github.io/',
                    summary: this.myReview,
                    author: {
                        name: "F-lancer",
                        avatar: "https://f-lancer.github.io/images/mephoto.jpg"
                    }
                }
                this.reviewsList.unshift(msg);
                this.myReview = '';
            }).catch((err)=>{
                console.log(err)
            })
        }
    },
    props:{
        typeId: {
           id : '',
           type : '',
        }
    }
}
</script>

<style>

</style>